<script setup lang="ts">
import ResizeBar from "@/components/core/window/modules/resize-bar.vue";
import WindowHead from "@/components/core/window/modules/window-head.vue";
import {computed, onMounted, provide, ref, watch} from "vue";
import {appConfigType} from "@/types/component/core";
import useTaskStore from '@/store/task'

const taskStore = useTaskStore()

const props = withDefaults(
    defineProps<{
      appConfig: appConfigType | null
    }>(),
    {
      appConfig: null
    }
);
provide('appConfig', computed(() => props.appConfig))
provide('setWindowOpacity', (val: number) => {
  windowOpacity.value = val
})
//是否在拖动的状态
let moveStart = ref<boolean>(false)
//是否正在进行拖动
let isMove = ref<boolean>(false)
//窗口移动时的临时数据
let startX = ref<number>(0)
let startY = ref<number>(0)

//过渡逻辑
let windowOpacity = ref<number>(0)
let windowDisplay = ref<string>('block')

//移动的状态下透明度变高
watch(() => isMove.value, (newVal) => {
  if (newVal) {
    windowOpacity.value = 0.5
  } else {
    windowOpacity.value = 1
  }
})
//窗口显示
const showWindow = () => {
  windowOpacity.value = 1
}
//窗口隐藏
const hideWindow = () => {
  windowOpacity.value = 0
}
//检测到窗口是否隐藏
watch(() => props.appConfig.windowHidden, (newVal) => {
  if (newVal) {
    hideWindow()
    setTimeout(() => {
      windowDisplay.value = 'none'
    }, 300)
  } else {
    windowDisplay.value = 'block'
    setTimeout(() => {
      showWindow()
    }, 80)
  }
})

onMounted(async () => {
  setWindowCenter()
  setTimeout(() => {
    showWindow()
  }, 80)
})


//设置窗口在最中心
const setWindowCenter = () => {
  //用页面的一半长度和宽度减去窗口的一半长度和宽度
  if (props.appConfig && props.appConfig.windowCenter) {
    props.appConfig.windowX = document.body.clientWidth / 2 - (props.appConfig.windowWidth / 2)
    props.appConfig.windowY = document.body.clientHeight / 2 - (props.appConfig.windowHeight / 2)
  } else if (props.appConfig && !props.appConfig.windowCenter) {
    if (!props.appConfig.windowX) {
      props.appConfig.windowX = document.body.clientWidth / 2 - (props.appConfig.windowWidth / 2)
    }
    if (!props.appConfig.windowY) {
      props.appConfig.windowY = document.body.clientHeight / 2 - (props.appConfig.windowHeight / 2)
    }
  }

}

//窗口拖动逻辑
const mousedown = ($event: MouseEvent) => {
  moveStart.value = true
  startX.value = $event.clientX
  startY.value = $event.clientY
}

//拖动时
const mousemove = () => {
  if (moveStart.value) {
    //防止拖动出元素之后拖动效果失效，使用最父级元素定位
    document.onmousemove = ($event: MouseEvent) => {
      isMove.value = true
      if (props.appConfig && props.appConfig.windowX && props.appConfig.windowY) {
        props.appConfig.windowX = props.appConfig.windowX - (startX.value - $event.clientX)
        props.appConfig.windowY = props.appConfig.windowY - (startY.value - $event.clientY)
        startX.value = $event.clientX
        startY.value = $event.clientY
        taskStore.ACTIVE_APP(props.appConfig.name)
      }
    }
    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
      moveStart.value = false
      isMove.value = false
    };
  }
}


const mouseup = () => {
  if (moveStart.value) {
    moveStart.value = false
    isMove.value = false
  }
}

//防止窗口移出界面拉不回来
watch(() =>  props.appConfig.windowY ,(newVal) => {
  if (props.appConfig && props.appConfig.windowY && props.appConfig.windowY < 30) {
    props.appConfig.windowY = 30
  }
})

const windowClick = () => {
  if (props.appConfig) {
    console.log('click')
    taskStore.ACTIVE_APP(props.appConfig.name)
  }
}
</script>

<template>
  <div class="window"
       :style="{top:props.appConfig.windowY+'px',
       left:props.appConfig.windowX+'px',
       opacity:windowOpacity,
       zIndex:taskStore.APP_IS_ACTIVE(props.appConfig.name)?95:90,
       width:props.appConfig.windowWidth+'px',
       height:props.appConfig.windowHeight+'px',
       transition:isMove?'none':'0.3s',
       display:windowDisplay
       }"
       @click.prevent="windowClick">
    <WindowHead @mousedown.prevent="mousedown($event)"
                @mousemove.prevent="mousemove()"
                @mouseup="mouseup()"
    ></WindowHead>
    <ResizeBar></ResizeBar>
    <slot></slot>
  </div>
</template>
<style lang="less" scoped>
.window {
  overflow: hidden;
  min-width: 800px;
  min-height: 500px;
  position: absolute;
  box-shadow: 0 4px 16px 0 rgb(0 0 0 / 60%);
  transition-property: top, left, width, height, opacity;
  background-color: #fff;
  border-radius: 4px;
}
</style>
